<template>
	<view class="mh100 pb115 bf5a">
		<uni-nav-bar id="uninavbar" bg="transparent" statusbg="#fff" :urbd="false" :fixed="true" :ispr="true"
			:statusBar="true" :border="false" nh="49px">
			<view class="f-y-c p03" style="height: 49px;"
				:style="{ background: `rgba(255,255,255,${opcity > 0.2 ? 0.9 : 1})` }">
				<view class="wei f-1 c0 f-y-c" :style="{ fontSize: opcity > 0.5 ? '32rpx' : '30rpx' }">
					<view>{{ sjxx ? sjxx.name : '暂无店铺' }}</view>
					<view @click="go({ url: '../dp/storeset/yyxg' })" class="f-y-c ml10 yyztc f24 nowei"
						:style="{ background: sjxx ? sjxx.storeOpen == 1 ? '' : sjxx.storeOpen == 2 ? '#FDF0B3' : '#FFDCDF' : '#FFDCDF' }">
						<view class="yd bsf mr10"
							:style="{ background: sjxx ? sjxx.storeOpen == 1 ? '' : sjxx.storeOpen == 2 ? '#E6A23C' : '#F56C6C' : '#F56C6C' }">
						</view>
						<view>{{ sjxx ? sjxx.storeOpen == 1 ? '正常营业' : sjxx.storeOpen == 2 ? '休息中' : '紧急关店' : '紧急关店'}}
						</view>
						<text class="iconfont iconright1 f20 c0"></text>
					</view>
				</view>
				<view class="f-c p-r">
					<text class="iconfont c0 f56"></text>
					<!-- <view class="p-a dixl cf bsf f-c" style="background: #FE192C;">0</view> -->
				</view>
			</view>
		</uni-nav-bar>
		<view class="bf">
			<view class="p23 c0">
				<view class="bf5a f-row t-c f24 bs20 l-h1">
					<view class="f-1 b-r-d p30">
						<view>今日预计收入/元</view>
						<view class="f50 wei mt15">{{ mdxx.todayTotal || '--' }}</view>
					</view>
					<view class="f-1 p30">
						<view>有效订单/单</view>
						<view class="f50 wei mt15">{{ mdxx.payCount || '--' }}</view>
					</view>
				</view>
			</view>
			<view class="p23">
				<view class="f-raw">
					<block v-for="(v, i) in arr" :key="i">
						<view @click="myDataClick(v)" class="p20 f-c-c f24 dikzc">
							<view class="" :class="i > -1 ? 'img1 mb20' : 'img2 mb10'"><mg-img
									:src="`/static/img/dp/${v.src}.png`"></mg-img></view>
							<view class="t-o-e">{{ v.name }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>



		<!-- 配送站信息模块 -->
		<view class="psz p23" style="background: #fff;">
			<view class="bf5a" style="padding: 20rpx; background: #F5F6FA; border-radius: 15rpx;">
				<!--        <view class="section-title" style="font-size:30rpx; color:#333; font-weight:bold; margin-bottom:16rpx;">
            配送站
        </view> -->
				<view style="margin-bottom:24rpx; display:flex; align-items:center; justify-content:space-between;">
					<view style="display: flex; align-items: center;margin: 0 25rpx;">
						<image src="../../static/wxlogo.png"
							style="width:80rpx; height:80rpx; border-radius:50%; margin-right:16rpx;" />
						<view>
							<view class="sub-title" style="font-size:28rpx;">糊涂跑腿</view>
						</view>
					</view>
					<view style="display: flex; align-items: center;margin: 0 25rpx;">
						<image src="/static/img/dp/phone.png" style="width:30rpx; height:30rpx; margin-right:8rpx;" />
						<view class="contact" style="font-size:24rpx;">18570084630</view>
					</view>
				</view>

				<!-- 费用双列布局 -->
				<view style="display:flex; align-items:center; border-top:2rpx solid #eee; padding:18rpx 0;">
					<view style="flex:1; display:flex; flex-direction:column; align-items:center;">
						<view style="font-size:24rpx; color:#333;">配送费用/元</view>
						<view class="fee-value" style="margin-top:12rpx;font-size: 50rpx;font-weight: bold;">564.5
						</view>
					</view>
					<view style="width:1rpx; height:50rpx; background: #c0c0c0;"></view>
					<view style="flex:1; display:flex; flex-direction:column; align-items:center;">
						<view style="font-size:24rpx; color:#333;">配送单价/元</view>
						<view  style="margin-top:12rpx;font-size: 50rpx;font-weight: bold;">1.5
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="bf">
			<view class="p23">
				<!-- <view class="f-y-c fwb f28 c0 mb20">糊涂跑腿</view> --> <!-- 添加模块标题 -->
				<view class="f-raw">
					<block v-for="(v, i) in hutuModules" :key="i">
						<view @click="myDataClick(v)" class="p20 f-c-c f24 dikzc">
							<view class="img1 mb20"><mg-img :src="`/static/img/dp/muddle/${v.src}.png`"></mg-img></view>
							<!-- <view class="img1 mb20"><mg-img
									:src="`https://qn.xqswl.cn/yb_wm/2/2025/02/28/202502281036404766.png`"></mg-img>
							</view> -->
							<view class="t-o-e">{{ v.name }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- <mg-swiper :co='lbswiper' u='rpx' :color='tColor'></mg-swiper>
		<nav-tab :sname="{background:'transparent'}" height="70" :isscroll="true" itw='24%' ifsize='30' :isname="{fontWeight:'bold',fontSize:'34rpx'}"
		 xhxjb='linear-gradient(to right, #FBDE41, #FDC547)' uw="40" uh="10" v-model="aIdx" @changeTab='changeTab' :tabs='tabs'></nav-tab> -->
		<mg-load v-if="showloading"></mg-load>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniNavBar from '@/components/third/uni-nav-bar.vue';
	import MgSwiper from '@/components/common/functionCmp/swiper.vue';
	import navTab from '@/components/common/functionCmp/nav-tab.vue';
	export default {
		name: 'my-index',
		components: {
			uniNavBar,
			MgSwiper,
			navTab
		},
		data() {
			return {
				showloading: true,
				opcity: 0,
				mdxx: {},
				hutuModules: [ // 糊涂跑腿模块功能
					{
						src: 'sdld',
						url: '../dp/muddle/muddle_order',
						name: '手动录单'
					},
					{
						src: 'ddcx',
						url: '../dp/muddle/muddle_search',
						name: '订单查询'
					},
					{
						src: 'czjl',
						url: '../dp/muddle/muddle_deposit',
						name: '充值记录'
					},
					{
						src: 'jfmx',
						url: '../dp/muddle/muddle_billing',
						name: '计费明细'
					}
				],
				arr: [{ // 原模块功能
						src: '1',
						url: '../my/storeset/goods/index',
						name: '商品管理'
					},
					{
						src: '2',
						url: '../dp/hxdd',
						name: '到店自取'
					},
					{
						src: '3',
						url: '../dp/OrderDine/quick-order',
						name: '快速点单'
					},
					{
						src: '4',
						url: '../dp/OrderDine/dine-in',
						name: '桌台点单'
					},
					{
						src: '5',
						url: '../dp/OrderDine/order-control',
						name: '订单管理'
					},
					{
						src: '6',
						url: '../dp/pay-face',
						name: '当面付'
					},
					{
						src: '7',
						url: '../dp/promotion-QRcode',
						name: '推广码'
					},
					{
						src: '8',
						url: '../dp/statistics/index',
						name: '数据概况'
					},
					{
						src: '9',
						url: '../dp/statement/index',
						name: '财务对账'
					},
					{
						src: '10',
						url: '../dp/assess/index',
						name: '顾客评价'
					}
				],
				lbswiper: {
					class: 'm3',
					swiper: [{
							url: 'https://images.ddycms.cn/yb_wm/39/2020/10/20/202010201335398156.png'
						},
						{
							url: 'https://images.ddycms.cn/yb_wm/39/2020/10/20/202010201335399563.png'
						}
					],
					duration: '',
					mode: '',
					height: '210',
					radius: '20',
					auto: true,
					interval: 5
				},
				aIdx: 0,
				tabs: [{
						name: '外卖学院',
						state: '1',
						dot: '0'
					},
					{
						name: '商家社区',
						state: '6',
						dot: '0'
					},
					{
						name: '服务市场',
						state: '2',
						dot: '0'
					}
				]
			};
		},
		computed: {
			...mapState(['sjxx'])
		},
		onLoad() {
			this.getData();
		},
		methods: {
			changeTab(e) {},
			// myDataClick(v) {
			// 	let url = '';
			// 	if (v.url) {
			// 		url = v.url;
			// 	} else {
			// 		if (v.name == '联系我们') {
			// 			return this.util.makeTel(this.system.tel);
			// 		}
			// 		url = '../my/other/kfz';
			// 	}
			// 	this.go({
			// 		t: 1,
			// 		url
			// 	});
			// },
			myDataClick(v) {
				if (!v.url) {
					this.util.message('功能暂未开放', 3);
					return;
				}
				this.go({
					t: 1,
					url: v.url
				}); // 执行页面跳转
			},

			getData() {
				this.util
					.request({
						url: this.api.wdymxx,
						method: 'POST'
					})
					.then(res => {
						if (res.code == 1) {
							this.mdxx = res.data;
							this.showloading = false;
						} else {
							this.util.message(res.msg, 3);
							this.showloading = false;
						}
					});
			}
		},
		onPageScroll(e) {
			if (this.opcity >= 1 && e.scrollTop / 64 >= 1) {
				return;
			}
			let o = e.scrollTop / 64;
			this.opcity = o;
			// console.log(o)
		}
	};
</script>
<style scoped lang="scss">
	.dixl {
		width: 35rpx;
		height: 35rpx;
		right: 0;
		top: 0rpx;
		font-size: 14rpx;
	}

	.yyztc {
		background: #e6f9f3;
		border-radius: 40rpx;
		padding: 6rpx 10rpx;

		.yd {
			width: 20rpx;
			height: 20rpx;
			background: #00be7e;
		}
	}

	.dikzc {
		width: 20%;

		.img1 {
			width: 88rpx;
			height: 88rpx;
		}

		.img2 {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>